<template>
  <div>
    <div class="edit-box">
      <div class="content" v-if="!edit">{{ account }}</div>
      <el-select
        v-else
        v-model="account"
        filterable
        remote
        default-first-option
        :remote-method="remoteMethodHandle"
        :loading="loading"
        v-bind="$attrs"
      >
        <el-option v-for="item in optionData" :key="item.account" :label="item.account" :value="item.account">
        </el-option>
      </el-select>
      <div class="icon-box" v-if="isEdit">
        <i slot="suffix" class="el-icon-edit" v-if="!edit" @click="editHandle"></i>
        <i slot="suffix" class="el-icon-circle-check" v-else @click="editComplete"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { userApi } from "api/evaluateApi";
export default {
  name: "secAccountEdit",
  props: {
    user: String | Array,
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  data() {
    return {
      loading: false,
      optionData: [],
      edit: false,
      account: "",
    };
  },
  mounted() {},
  methods: {
    remoteMethodHandle(query) {
      this.loading = true;
      userApi({ account: query }).then((res) => {
        this.loading = false;
        this.optionData = res.data;
      });
    },
    editHandle() {
      this.edit = !this.edit;
    },
    editComplete() {
      this.edit = !this.edit;
      this.$emit("editComplete", { prop: this.$attrs.prop, user: this.account });
    },
  },
  watch: {
    user: {
      immediate: true,
      handler(newVal) {
        this.account = newVal;
      },
    },
  },
};
</script>
<style scoped lang="scss">
.edit-box {
  position: relative;
  .icon-box {
    position: absolute;
    right: -70px;
    top: 0px;
    font-size: 20px;
    width: 60px;
    color: $themeColor;
  }
}
</style>
